﻿@using XRepair.Models

@model List<Service>

@{
    ViewBag.Title = "Index";
}

@section head
{
    <link type="text/css" href="@Url.Content(@"~\Content\themes\base\jquery-ui.css")" rel="stylesheet" />

    <style type="text/css">
        #serviceList
        {
            border-collapse: collapse;
        }

            #serviceList td
            {
                border: 1px solid #999;
                vertical-align: top;
            }

        #dlgAddNewService td, #dlgEditService td
        {
            vertical-align: top;
        }

        .lnkEditService
        {
            cursor: pointer;
        }

        #serviceList thead tr
        {
            font-weight: bold;
            background: #999;
        }

    </style>
}

<h2>List of services</h2>

<table id="serviceList">
    <thead>
        <tr>
            <td class="hide">[ID]</td>
            <td>[DeviceTypeID]</td>
            <td class="hide">[SymptomTypeID]</td>
            <td>[ServiceName]</td>
            <td>[ServiceDescription]</td>
            <td>[LaborCost]</td>
            <td>[DiscountLabor]</td>
            <td>[PartCost]</td>
            <td>[DiscountPart]</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td class="hide">@item.ID</td>
                <td>@item.DeviceTypeID</td>
                <td class="hide">@item.SymptomTypeID</td>
                <td>@item.ServiceName</td>
                <td>@item.ServiceDescription</td>
                <td>@item.LaborCost</td>
                <td>@item.DiscountLabor</td>
                <td>@item.PartCost</td>
                <td>@item.DiscountPart</td>
                <td><a class="lnkEditService">Edit</a>
                    <br />@Html.ActionLink("Delete", "Delete", new { id = @item.ID })</td>
            </tr>
        }
    </tbody>
</table>

<input type="button" value="Add new" id="btnAddNewService" />

<div id="dlgAddNewService" class="hide" title="Add new service">
    @Html.Partial("AddNewPartial", new Service())
</div>

<div id="dlgEditService" class="hide" title="Edit service">
    @Html.Partial("EditPartial", new Service())
</div>

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\mvcxrepairadmin.js")"></script>

    <script type="text/javascript">
        $(function () {
            $("#dlgAddNewService, #dlgEditService").dialog({
                autoOpen: false,
                height: 555,
                width: 670,
                modal: false,
                resizable: false
            });

            $("#btnAddNewService").click(function () {
                $("#dlgAddNewService").dialog("open");
            });

            $("#btnCancelAdd").click(function () {
                $("#dlgAddNewService").dialog("close");
            });

            $("#btnCancelEdit").click(function () {
                $("#dlgEditService").dialog("close");
            });

            $(".lnkEditService").click(function () {
                var contextObj = $(this);
                BindCurrentRowToModel(contextObj);
                $("#dlgEditService").dialog("open");
            });

        });

        function BindCurrentRowToModel(contextObj) {

            var currentRowDataArr = [];
            var currentRow = $(contextObj).closest("tr");

            $('td', currentRow).each(function (i, td) {
                currentRowDataArr.push($(td).html());
            });

            $("#dlgEditService #ID").val(currentRowDataArr[0]);
            $("#dlgEditService #DeviceTypeID option[value='" + currentRowDataArr[1] + "']").attr("selected", "selected");
            $("#dlgEditService #SymptomTypeID option[value='" + currentRowDataArr[2] + "']").attr("selected", "selected");
            $("#dlgEditService #ServiceName").val(currentRowDataArr[3]);
            $("#dlgEditService #ServiceDescription").val(currentRowDataArr[4]);
            $("#dlgEditService #LaborCost").val(currentRowDataArr[5]);
            $("#dlgEditService #DiscountLabor").val(currentRowDataArr[6]);
            $("#dlgEditService #PartCost").val(currentRowDataArr[7]);
            $("#dlgEditService #DiscountPart").val(currentRowDataArr[8]);
        }

    </script>
}

